<template>
  <div>
    <ZgDialog
      width="60%"
      top="10%"
      title="修改字段"
      v-model="visible"
      @ok="save">
      <div class="scroll" :style="{height:`${winHeight-360}px`}">
        <a-form :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
          <a-form-item label="字段名称" required>
            <ZgInput :width="160" v-model="name"></ZgInput>
          </a-form-item>
          <a-form-item label="字段编码">
            <div class="w160 disable">{{ code }}</div>
          </a-form-item>
          <a-form-item label="字段类型">
            <div class="flx-s">
              <div class="w160 disable">{{ compType }}</div>
              <div class="flx-s">
                <div v-if="hasType" class="flx-s ml10">
                  字典类型:<ZgInput class="ml10" :width="120" v-model="extra.字典类型"></ZgInput>
                </div>
                <div v-if="hasRows" class="flx-s ml10">
                  行数:<ZgNumber class="ml10" :width="120" v-model="extra.行数"></ZgNumber>
                </div>
                <div v-if="hasHeight" class="flx-s ml10">
                  高度:<ZgNumber class="ml10" :width="120" v-model="extra.高度"></ZgNumber>
                </div>
              </div>
            </div>
          </a-form-item>
          <a-form-item label="默认值" v-if="hasDefaultVal">
            <div v-if="compType==='富文本'">
              <ZgTinymce v-model="strDefaultVal"></ZgTinymce>
            </div>
            <div v-if="compType==='多行文本'">
              <ZgTextarea v-model="strDefaultVal"></ZgTextarea>
            </div>
            <div v-if="compType==='单行文本'">
              <ZgInput :width="400" v-model="strDefaultVal"></ZgInput>
            </div>
            <div v-if="compType==='整数'">
              <ZgNumber :width="160" v-model="numberDefaultVal"></ZgNumber>
            </div>
            <div v-if="compType==='浮点数'">
              <ZgNumber :width="160" v-model="numberDefaultVal" isFloat></ZgNumber>
            </div>
            <div v-if="compType==='单选框'">
              <ZgCheckbox v-model="booleanDefaultVal"></ZgCheckbox>
            </div>
            <div v-if="compType==='多选'&&extra.字典类型.length>0">
              <ZgSelectMany v-model="arrDefaultVal" :code="extra.字典类型"></ZgSelectMany>
            </div>
            <div v-if="compType==='字典'&&extra.字典类型.length>0">
              <ZgDictionary v-model="strDefaultVal" :type="extra.字典类型"></ZgDictionary>
            </div>
            <div v-if="compType==='开关'">
              <ZgSwitch v-model="booleanDefaultVal"></ZgSwitch>
            </div>
          </a-form-item>
          <a-form-item label="模糊匹配">
            <ZgSwitch v-model="isLike"></ZgSwitch>
          </a-form-item>
          <a-form-item label="正则表达式">
            <ZgSelect :width="160" class="mr10" v-model="regexType" :options="regexOptions"></ZgSelect>
            <ZgInput v-if="regexType&&regexType.length>0" :width="360" v-model="regex"></ZgInput>
          </a-form-item>
          <a-form-item v-if="regex&&regex.length>0" label="错误提示语">
            <ZgInput :width="400" v-model="errorMsg"></ZgInput>
          </a-form-item>
        </a-form>
      </div>
    </ZgDialog>
  </div>
</template>
<script>
import { columnMixin } from './js/mixin'
import { getDataTypeByCompType, filterExtra } from './js/constant'
export default {
  mixins: [columnMixin],
  data () {
    return {
      visible: false
    }
  },
  mounted () {
  },
  methods: {
    open (json) {
      if (json) {
        this.id = json.id
        this.name = json.name
        this.code = json.code
        this.compType = json.compType
        // 默认值
        this.initDefaultVal(json.defaultVal)
        this.isLike = json.isLike
        // 正则
        this.regex = json.regex
        this.errorMsg = json.errorMsg
        // 扩展属性
        this.extra = Object.assign({}, this.extra, JSON.parse(json.extra))
      }
      this.visible = true
    },
    save () {
      if (this.name.length === 0) {
        this.$error({ title: '请输入字段名称' })
        return
      }
      const param = {
        id: this.id,
        name: this.name,
        code: this.code,
        compType: this.compType,
        dataType: getDataTypeByCompType(this.compType),
        defaultVal: this.getDefaultVal(),
        isLike: this.isLike,
        regex: this.regex,
        errorMsg: this.errorMsg,
        extra: JSON.stringify(filterExtra(this.extra, this.compType))
      }
      this.$http.post('/zg-autoform/column/update', param, () => {
        this.visible = false
        this.$emit('ok')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
